<template>
	<div>
		<scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" @scrolltolower="scrolltolower()">
			<view style="background-color: #ffffff;margin: 10px;padding: 15px;border-radius: 12px;">
				<!-- <uni-forms :modelValue="formData" label-width="70px">
					<uni-forms-item label="操作人员">
						<uni-easyinput  v-model="formData.operName" placeholder="请输入操作人员姓名"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="操作时间">
						<uni-datetime-picker @change="searchLog" v-model="range" type="daterange"/>
					</uni-forms-item>
				</uni-forms> -->
				<!-- <view @click="searchLog" hover-class="buttonHover" style="color: #2979ff;text-align: end;">搜索</view> -->
				<uni-datetime-picker @change="searchLog" v-model="range" type="daterange"/>
			</view>
			<view v-for="(item,index) in logList" :key="index" style="display: flex;flex-direction: column;border-bottom: 1px solid #ededed;background-color: #ffffff;margin: 10px;padding: 15px;border-radius: 12px;">
				<view style="display: flex;justify-content: space-between;">
					<text>{{item.operId}}</text>
					<text>{{item.title}}</text>
					<text>{{businessType_[item.businessType]}}</text>
					<!-- <text>{{item.requestMethod}}</text> -->
				</view>
				<!-- <view style="margin-top: 10px;font-size: 12px;word-break: break-all;">
					操作方法：{{item.method}}
				</view>
				<view style="font-size: 12px;word-break: break-all;">
					操作URL：{{item.operUrl}}
				</view> -->
				<view style="margin-top: 10px;font-size: 12px;word-break: break-all;">
					<text>IP地址：{{item.operIp}}</text>
				</view>
				<view style="font-size: 12px;word-break: break-all;">
					<text>操作人：{{item.operName}}</text>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 10px;">
					<!-- <text>IP地址：{{item.operIp}}</text> -->
					<!-- <text>操作人：{{item.operName}}</text> -->
					<span>
						操作状态：
						<text v-if="item.status" style="color: #18bc37;">成功</text>
						<text v-else style="color: #e43d33;">异常</text>
					</span>
					<text>{{item.operTime}}</text>
				</view>
			</view>
			<uni-load-more status="more" :status="loadMoreStatus" @clickLoadMore="scrolltolower()"></uni-load-more>
			<view style="height: 50px;"></view>
		</scroll-view>
	</div>
</template>

<script>
	import {getOperlog} from '@/api/system/log.js'
	export default {
		data() {
			return {
				formData: {
					operName:'',
				},
				//日期范围
				range:[],
				//日志列表
				logList:[],
				//业务类型
				businessType_:['其它 ','新增','修改','删除'],
				scrollH: 700,
				//上拉触底节流标识
				flag:true,
				//加载更多
				loadMoreStatus:'more',
				pageNum:10,
			}
		},
		onLoad(e) {
		    uni.getSystemInfo({
		        success: res => {
		            this.scrollH = res.windowHeight;
		        }
		    });
		},
		created() {
			this.getOperlogList()
		},
		methods:{
			// 触底的时候请求数据，即为上拉加载更多
			scrolltolower(name){
				this.loadMoreStatus='loading'
				if(this.flag){
				    setTimeout(()=>{
						this.pageNum+=10;
						this.getOperlogList()
				        this.flag = true;
				    },1000);
				}
				this.flag = false;
			},
			async getOperlogList(){
				let data={
					operName:this.formData.operName,
					pageNum:1,
					pageSize:this.pageNum
				}
				if(this.range.length)
				{
					data.createTimeStart=this.range[0]
					data.createTimeEnd=this.range[1]
				}
				await getOperlog(data).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.logList = res.rows
						this.loadMoreStatus=res.rows.length===this.pageNum?'more':'noMore'
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}	
				})
			},
			searchLog(e){
				if(e.length===0)
				{
					this.range=[]
				}
				this.pageNum=10;
				this.getOperlogList()
			},
		}
	}
</script>

<style scoped>
	::v-deep .uni-forms-item__label[data-v-61dfc0d0] {
	    width: 90px !important;
	}
	.buttonHover {
		opacity: 0.6;
	}
</style>